<template>
  <div class="m-count-line__item" :style="comItemStyle" :class="comClazz"></div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "MCountLineItem",
  props: {
    width: {
      type: String,
      default: "0",
    },
    color: {
      type: String,
      default: "hotpink",
    },
    round: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const comItemStyle = computed(() => {
      return {
        background: props.color,
        width: props.width,
      };
    });

    const comClazz = computed(() => {
      return {
        "is-round": props.round,
      };
    });

    return {
      comItemStyle,
      comClazz,
    };
  },
});
</script>
